import React, { useState } from "react";

import { SubmitBar, Checkbox } from "react-vant";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import "./pingjia.css";
import { useDispatch, useSelector } from "react-redux";
import { Stepper } from "react-vant";
import { setcheck,setallcheck,setnum } from "../../store/cart";
import { Empty } from 'antd-mobile';
import { QuestionCircleOutline } from 'antd-mobile-icons'

export default function Cart() {
  let navigate = useNavigate();
  let cart = useSelector((store) => store.cart.list);
  let dispatch = useDispatch()
  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
    
    
      
      <div className="pj">
        <NavBar back="编辑" onBack={() => navigate(-1)} backIcon={false}>
          购物车
        </NavBar>
      </div>
      <div className="cont">{}</div>

      {cart.length?<div></div>:<Empty
          style={{ padding: '64px 0' }}
          image={
            <QuestionCircleOutline
              style={{
                color: 'var(--adm-color-light)',
                fontSize: 60,
              }}
            />
          }
          description='暂无商品请添加~'
        />
        
        }
      <div className="shopcart" style={{marginTop:"10px"}} >
        {cart.map((i) => (
          <div key={i._id} style={{display:"flex",marginTop:"20px"}}>
            <input style={{marginLeft:"20px"}} className="check"type="checkbox" checked={i.check} onChange={(e)=> {
                dispatch(setcheck(i._id))
            }} />
            <img src={i.image[0]} style={{marginLeft:"15px",borderRadius:"10px",width:"100px",height:"100px"}} alt="" />
            <div  style={{marginLeft:"30px",marginTop:"20px"}}>
              <p>{i.name}</p>
              <div>
                <span>${i.price}</span>
                <Stepper
                  defaultValue={i.num}
                  onOverlimit={() => console.log("overlimit")}
                  onMinus={() => console.log("minus")}
                  onPlus={() => console.log("plus")}
                  onChange={(v) =>{dispatch(setnum({_id:i._id,num:v}))}}
                />
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="dd">
        <SubmitBar
          style={{ marginBottom: "60px" }}
          price={
            cart
             .filter((i) => i.check)
             .reduce((acc, cur) => acc + cur.price * cur.num, 0)*100
          }
          buttonText="结算"
          onSubmit={()=>{
            navigate("/qerendingdan");
          }}
          buttonColor="rgb(153, 204, 51)"
        >
          <Checkbox onChange={(val)=>{dispatch(setallcheck(val))}} checked={useSelector((store) => store.cart.allcheck)}>全选</Checkbox>
        </SubmitBar>
      </div>
    </div>
  );
}
